<template>
    <div class="standardInspectionContainer">
        <el-row class="standardInspectionContainer_btn">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSpectionEvent">添加检验指标</el-button>
        </el-row>


        <div class="lists_containers_table">
            <el-table :data="tableData" style="width: 100%;margin-top:10px;" border class="tablesContainers">

                <el-table-column fixed label="操作" :width="device == 'mobile' ? 120 : 120" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini">修改</el-button>
                        <el-button type="text" size="mini">删除</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="异常提示" width="80" fixed align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p v-if="scope.row.ycts === 'null'">
                                正常
                            </p>
                            <p v-if="scope.row.ycts === 'L'">
                                偏低
                            </p>
                            <p v-if="scope.row.ycts === 'H'">
                                偏高
                            </p>
                            <div slot="reference" class="name-wrapper">
                                <i class="el-icon-circle-check" style="color: #67c23a"
                                    v-if="scope.row.ycts === 'null' || scope.row.ycts === ''"></i>
                                <i class="el-icon-top" style="color: red" v-if="scope.row.ycts === 'H'"></i>
                                <i class="el-icon-bottom" style="color: red" v-if="scope.row.ycts === 'L'"></i>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="medicalRecordNumber" sortable label="病历号" width="120" align="center">
                </el-table-column>
                <el-table-column prop="bgdhName" sortable label="报告单号" width="120" align="center">
                </el-table-column>

                <el-table-column prop="eventName" label="检验指标" width="120" align="center">

                </el-table-column>
                <el-table-column prop="eventShort" label="简称" width="100" align="center">

                </el-table-column>
                <el-table-column prop="consequence" sortable label="检验结果" width="140" align="center">
                </el-table-column>
                <el-table-column prop="unit" label="单位" align="center">
                </el-table-column>

                <el-table-column prop="reference" label="参考值" width="120" align="center">

                </el-table-column>
                <el-table-column prop="ycts" label="异常提示代码" width="80" align="center">
                </el-table-column>
                <el-table-column prop="consequenceTime" label="时间" width="100" align="center">

                </el-table-column>
            </el-table>
        </div>
        <div class="paginationDiv dailogactive">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="allPageCurrent" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="10"
                layout="sizes, prev, pager, next,total" :total="allTotalPage">
            </el-pagination>
        </div>

        <!-- 添加检验指标 -->
        <!-- 新增教学库 -->
        <div class="registerDailog" v-if="addSpectionDailog">
            <addSpection @close="closedDailog"></addSpection>
        </div>
    </div>
</template>

<script>
import addSpection from './addSpection.vue';//检查指标
export default {
    name: 'standardInspection',
    components: {
        addSpection
    },
    props: {
        digitalSlicingData: {
            type: Object,
            default: {},
        },
        pathologyId: { //病例id
            type: [String, Number],
            default: '',
        },
        diagnosisId: { //诊断id
            type: [String, Number],
            default: '',
        },
    },
    data() {
        return {
            addSpectionDailog: false,
            tableData: [

            ],
            inspectionloading: false,
            PICdialogVisible: false,
            tabStatusNumber: 0,
            ExceptionWarning: 'L,H',
            SelectionItemsData: [],
            allPageCurrent: 1,
            allPageSize: 10,
            allTotalPage: 0,
        };
    },
    computed: {

        device() {
            return this.$store.state.device
        }
    },
    mounted() {
        this.tabStatusNumber = 1;
        this.selectionItemsValue = [];
        this.allFilter = {};
        this.inspectionReportData(
            this.pathologyId,
            this.allPageCurrent,
            this.allPageSize,
            this.allFilter,
            this.tabStatusNumber
        );
    },
    methods: {
        // 检验报告数据(异常指标和特征指标会调用此方法)
        async inspectionReportData(
            pathologyId,
            PageCurrent,
            PageSize,
            filter,
            specialIndicators
        ) {
            this.inspectionloading = true;
            if (pathologyId) {
                let url = `/inspectionInformation/special-index?page=${PageCurrent}&pathologyId=${pathologyId}&size=${PageSize}&specialIndicators=${specialIndicators}`;
                const datas = [];
                const params = {};
                if (filter.ycts) {
                    params.ycts = encodeURIComponent(filter.ycts);
                }
                if (filter.eventNames) {
                    params.eventNames = encodeURIComponent(filter.eventNames);
                }
                Object.getOwnPropertyNames(params).forEach((key) => {
                    const value = params[key];
                    if (value) {
                        datas.push(`${key}=${value}`);
                    }
                });
                if (datas.length > 0) {
                    url = `${url}&${datas.join('&')}`;
                }

                console.log('get-inspectionReportData', url);
                await this.$axios({
                    // 详见 axios 请求配置项
                    method: 'GET',
                    url,
                }).then((res) => {
                    const result = res.data;
                    // 请求成功
                    if (res.data.code === 200) {
                        this.tableData = result.data;

                        this.allTotalPage = result.pageInfo.total;
                        // 字典数据异常指标获取 为了异常指标列表展示
                        this.ExceptionWarning = 'L,H';
                        let SelectionItemsData = [];
                        // 请求成功
                        if (result.eventName.length > 0) {
                            result.eventName.forEach((temp) => {
                                SelectionItemsData.push({
                                    label: temp.eventName,
                                    value: temp.eventName,
                                });
                            });
                            this.SelectionItemsData = SelectionItemsData;
                            this.abnormalSelectionItemsData =
                                SelectionItemsData;
                        }
                    }
                    if (res.data.code === 500) {
                        this.$message.info('无数据');
                    }
                });
                this.inspectionloading = false;
            }
        },
        handleSizeChange(val) {

            this.allPageSize = val;

            console.log(`每页 ${val} 条`);
            this.handleQuery()
        },
        handleCurrentChange(val) {

            this.allPageCurrent = val
            console.log(`当前页: ${val}`);
            this.handleQuery()
        },
        handleQuery() {
            this.inspectionReportData(
                this.pathologyId,
                this.allPageCurrent,
                this.allPageSize,
                this.allFilter,
                this.tabStatusNumber
            );
        },
        addSpectionEvent() {
            this.addSpectionDailog = true
            this.stopScroll()
        },
        closedDailog() {
            this.canScroll()
            this.addSpectionDailog = false
        }
    },
};
</script>

<style scoped>
.standardInspectionContainer {
    height: 100%;
    position: relative;
}

.standardInspectionContainer_btn {
    margin-bottom: 20px;
}

.lists_containers_table {

    height: calc(100% - 90px);
    overflow: hidden;
    overflow-y: auto;
}
</style>
